Der er mange der tror, at det er svært at lave en hjemmeside, og at det er forbeholdt de teknisk dygtige. Dette er dig forkert og alle kan faktisk lære at lave en hjemmeside fra bunden! Vi skal passe på med at love noget, men hvis du læser denne guide grundigt igennem og prøver tingene af, så kan du potentielt sidde med din egen hjemmesiden indenfor kun et par timer!

Ligeledes, så er der rigtig mange som tror, at man laver hjemmesider med avancerede programmer og værktøjer. Der findes helt rigtigt programmer, der påstår, at de kan lave din hjemmeside for dig, og nogle kommer tættere på end andre, men hvis du vil have det gjort på den rigtige måde, så skal du selv hen og kode/arbejde for det. Det er heldigvis super nemt at komme i gang, og du har sandsynligvis allerede programmerne til det på din computer allerede.

Målet med denne guide er at hjælpe dig i gang med din egen hjemmeside og samtidig lære HTML. Selvom man idag typisk laver hjemmesider med CMS´er (Content Management Systemer), som f.eks. WordPress og Joomla, så er det stadig en stor fordel både at kende til HTML og CSS (se vores guide her). Den hjemmeside, som du får med et CMS, er nemlig stadig bygget med HTML og CSS, og skal du ind og rette noget i layoutet eller designet, som du ikke kan rette via dit CMS, så er det HTML og CSS, som du skal hen og arbejde med.

Denne guide vil dog ikke vise dig alt, og der er derfor lagt op til, at du efter hvert afsnit selv prøver kræfter med de ting, du lærer. Går du helt i står og vil du gerne have nogle til at lave din hjemmeside for dig, så kan du kontakte os her.

Hvordan du vil bruge guide er selvfølgelig op til dig selv, men vi vil foreslå, at du maksimalt læser 2-3 afsnit om dagen, og i stedet bruger tiden på at eksperimentere med de nye ting, du lærer i hver lektion.

Lad os komme i gang!

Hvad er HTML?

HTML er det sprog som browseren læser og fortsår og det et fundamentet for alle sider på Internettet.

Måske kender du Tim Berners-Lee, det var ham der tilbage i det herrens år 1990 (eller cirka deromkring) opfandt HTML. Målet var at gøre det nemt for forskere på forskellige universiteter at få adgang til hinandens resultater. Projektet lykkedes nok bedre end Tim Berners-Lee havde regnet med, for med HTML skabte han nærmest også det vi i dag kender som internettet. Du kan lære mere om manden her.

Man kan således sige, at HTML ‘sprog’, der gør det muligt at præsentere materiale på nettet. Når du går ind på en hjemmeside, er det du ser en ‘oversættelse’ af HTML – det er din browser, der oversætter HTML til noget du kan se og interagere med. Hvis du højreklikker på en hvilken som helst hjemmeside og trykker “View source” vil du kunne se al den HTML-kode der gemmer sig bag den – det er vildt nok, at alt det kan blive til en så fin og organiseret hjemmeside ikke?

Ved første øjekast ser HTML meget uoverskueligt og rodet ud, men bare rolig, når du først har læst denne guide vil det hele give meget mere mening.

Hvad kan jeg så bruge HTML til?

Som du nok allerede har gættet, jamen så bruges HTML til at lave hjemmesider på internettet. Det bruges også andre steder offline, men primært, så er det på internettet vi bruger HTML.

Okay, men hvad betyder HTML?

HTML står for HyperText Mark-up Language – Lyder fancy hva? Helt konkret så betyder de forskellige dele følgende:

Hyper er det modsatte af lineær. I gamle dage – Kort sagt så betyder det, at du ikke behøver at følge en lineær vej, når du bruger HTML, du kan klikke rundt som du vil og gå derhen hvor du vil (i modsætning til hvordan det var helt i starten)

Text er bare “tekst”, for det er jo tekst du i bund og grund skriver.

Mark-up er det du gør med teksten. Du markerer den op med overskifter, området osv, så en browser kan læse det og vise det frem

Language er “sprog” på dansk. Som beskrevet før er HTML et sprog for browsere.

Hvad skal jeg bruge for at komme i gang?

Det er faktisk ret simpelt, du behøver kun din computer for at komme i gang. Herpå ligger der nemlig notesblok, hvis du bruger windows og TextEdit hvis du bruger Mac, som begge er programmer du kan skrive HTML i.

Du kan dog også hente programmet ATOM, som er et lækkert lille værktøj til at kode i.

Mere behøver du faktisk ikke, ikke engang adgang til internettet behøver du. Du kan nemlig sagten skrive et HTML dokument og se det lokalt på din egen computer, uden at du eller det skal ud på det store internet først.

Tags!

Tags er det som HTML ugøres af. Tags er HTML sprogets ord. Så hvis du f.eks. vil lave en overskrift, så skal du bruge et tag som fortæller, at her kommer en overskrift.

Et tag er typisk bygget op således Åbningstag: <kommando> og lukketags: </kommando>. Alt det der står imellem tagget er enten andre tags eller noget tekst.

Hvis vi f.eks. vil lave et stykke tekst, skal vi fortælle det med et paragraftag “p”

<p>Dette er en paragraf</p>

Vi starter med at lave et åbnings p-tag, så skriver vi noget tekst, og så lukker vi vores p-tag.

Vi kan også lave overskrifter, f.eks. en overskrift 1 og 2:

<h1>Dette er en stor overskrift</h1>
<h2>Dette er en lidt mindre overskrift2</h2>

Du kan skrive tags med både stort og småt, men skriv med små, det er det de fleste gør.

Din første side

Vi skal have lavet din første side, hvor du kan lave tekster og overskrifter, som du jo allerede har lært.

En side i HTML skal dog have en vist struktur, og der er en række tags, som altid skal være der, før end at det fungerer korrekt.

Herunder kan du se strukturen:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dokument titel</title>
</head>
<body>
Indhold
</body>
</html>

Først har vi en html-tag, som fortæller browseren, at her kommer der html. det åbnes først og lukke til sidst. Mellem det har vi et head-tag, hvor du f.eks. kan angive titlen på dit dokument. Det er ikke en titel der vil blive vist på selve siden, men snarre den titel, Google vil bruge i deres søgereaultater og den titel man vil kunne se i browserfanen. Læg mærke til at head-tagget også åbnes og lukkes.

Derudover har vi body-tagget, og det er herimellem indholdet på din side skal findes. Det er her du kan skrive dine overskrifter og paragraffer.

Så prøv at gøre det! Lav en side, indsæt en overskrift og en paragraf og gem så siden på dit skrivebord. Husk at filen skal have endelsen .html.

Når ud har gjort det, vil din computer typisk automatisk forstå at det er en html fil, og at den skal åbnes med en browser, så når du har gemt filen kan du prøve at åbne den i browseren, og så skulle du gerne kunne se din overskift og din paragraf! I browserfanen vil du måske også kunne se din dokument titel!

Lidt flere simple tags

Nu kan du lave overskrifter og paragraffer, med der findes selvfølgelig en masse andre tags også

Her under har vi lavet et par stykker, som du selv kan prøve kræfter med

<br /> linieskrift
<hr /> Horisontal linie
<ul>
<li>uordnet listepunkt</li>
<li>uordnet listepunkt</li>
<ul>
<ol>
<li>ordnet listepunkt</li>
<li>ordnet listepunkt</li>
<ol>

Med ovenstående kan du altså lave linjeskift i din pargraffer eller måske en horisontal linje mellem dine overskrifter og dine pargraffer. Har du brug for at lave en liste, kan du også lave sådan en, både en der er nummeret (ordered) og en der bare har nogle liste-punkter (unordered)

Attributter

Et HTML element kan have attributter. Man kan f.eks tilføre “style” attributen for at ændre på elementets styling. F.eks. har vi herunder tilføjet en style attribut til en overskrift for at ændre farven på den.

<h2 style="color:#eee">Overskrift</h2>

Dette vil du lære meget mere om i vores CSS guide.

Der findes et hav af attributter, som man kan sætte på forskellige html-elementer, men det er kun nogle få man ofte bruger. Du kan se en fuld liste med attributter her.

Links, dem der får det hele til at hænge sammen!

Til at lave links skal du bruge det, du altid bruger når du koder HTML: et tag. Et simpelt lille tag med ét element og én attribut, og du kan linke til alt og alle. Her er et eksempel på hvordan et link til html.dk ville se ud:

<a href="https://www.html.dk">Her er et link til html.dk</a>

Elementet “a” står for “anchor”, som er engelsk for “anker”. Attributten href er en forkortelse af ” Hypertext REFerence”, hvilket betyder “Det er her linket går til” .

href sættes lig “https://www.html.dk”, hvilket er den fulde adresse på html.dk, og kaldes en URL (Uniform Resource Locator) (bemærk “https://”, der også skal medtages). Sætningen “Her er et link til html.dk” er det der ses i browseren som et link og er typisk det man kalder for “anker-teksten”. Husk at lukke taget med et </a>.

Hvis du gerne vil lave et link til din egen side, skal du ikke lave den fulde URL, som vist i eksemplet herover. Her skal du istedet skrive en rekaltiv sti:

<a href="side2.html">Et link til side 2</a>

Her ligger din side 2 i samme mappe som den side du er på, men hvis den lå en undermappe, så ville eksemplet se således ud:

<a href="/undermappe/side2.html">Et link til side 2</a>

Hvis vi derimod stod på side2.html, og ville linke tilbage til den anden side(side1.html), ville linket se således ud:

<a href="../side1.html">Et link til side 1</a>

Billeder

Man kan selvfølgelig også indsætte billeder på din hjemmeside med HTML. Det gøres igen med et tag nemlig img-tagget.

<img src="billede.jpg" />

Læg mærke til, at det her ikke er et afslutningstag. Til gengæld har vi en attribut, nemlig src, som angiver kilden til billede.

Her skal du angive stien, ligesom ved linket, til det billede du gerne vil have vist.

Faktisk findes der også en anden attribut, som er vigtig, når du arbejder med søgemaskiner. Denne er alt-attributten, som fortæller browseren, hvad der er på billedet. I eksemplet herunder har vi tilføjet denne attribut og samtidig lavet vores billede til et link ved at indsætte det i et link element – det kan man nemlig også!

<a href="info_om_ko.html"><img src="billede.jpg" alt="et billede af en ko"/></a>

Tabeller

Tabeller bruger man af og til til at strukturere sin data, og du kan selvfølgelig også lave dem i HTML. Et layout til en simpel tabel kunne f.eks. se sådan her ud:

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Tabeller er inddelt i rækker, og derfor skal lave lavet et tr-tag hver gang man vil lave en ny række. I eksemplet ovenfor har vi 3 rækker.

Inde i hver række kan man så have data. Denne data sætte i td-tagget, “table data”. Den øverste række i en tabel bruger typisk th-tags, fordi det er overskrifterne i tabellen, altså “table headers”.

Prøv selv at kopiere ovenstående tabel og tilføj så selv flere td-tags med indhold i de forskellige rækker for at se, hvordan det fungerer.

I eksemplet ovenfor har vi 3 rækker med 3 celler i hver. Men hvad nu hvis man gerne vil have, at række 1 bredder sig over 3 celler således at der kun er én celle i række 1.

Det kan man gøre med en attribut der hedder colspan, hvor man angiver hvor mange kolonner ens celle skal sprede sig over. Helt konkret, kan man gøre det som vist i eksemplet nedenfor.

<table>
  <tr>
    <td colspan="3">Celle 1</td>
  </tr>
  <tr>
    <td>Celle 2</td>
    <td>Celle 3</td>
    <td>Celle 4</td>
  </tr>
</table>

På samme måde kan du bruge rowspan til at bredde en celler over flere rækker:

<table>
  <tr>
    <td rowspan="3">Celle 1</td>
    <td>Celle 2</td>
  </tr>
  <tr>
    <td>Celle 3</td>
  </tr>
  <tr>
    <td>Celle 4</td>
  </tr>
</table>

Nu er du faktisk ved at være der, hvor du kan lave din egen simple hjemmeside

Du kan lave:

• Overskrifter
• Paragraffer / tekststykker
• links
• Billeder
• Tabeller
• Lister

Du mangler bare ét vigtigt element!

DIV-elementer | når du skal lave layout

Du mangler nemlig div-elementet.

Med div-elementet kan angrænse områder på din side og opsætte et layout, f.eks. kan du indramme din menu med en div, dit indhold med en div og den nederste del af din hjemmeside med en div, og derefter ved hjælp af CSS positionere det hele så det ser pænt ud.

Div-elementet i sig selv kan ikke ret meget, men når du begynder at strukturere din hjemmeside, så er det det element du kommer til at bruge aller mest!

Herunder kan du se et meget simpelt layout med div´s, hvor vores områder på siden er indkapslet af div´s. Vi bruger også et stylesheet til at style vores elementer, og det vil du lære mere om i vores CSS guide.

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div id="header"><h1>Dette er en overskift i toppen af siden</h1></div>
  <div id="navigation">
    <ol>
      <h4>Min navigation</h4>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
    </ol>
  </div>
  <div class="indhold"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tristique turpis mollis nibh aliquam rhoncus. Praesent dui tellus, vehicula a nunc non, tempus gravida lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus pretium ipsum, dictum tempus dolor fringilla ut. Aliquam pharetra rhoncus accumsan. Integer mollis pretium euismod. Nunc bibendum massa turpis.</p></div>
      <div id="footer"><p>Bunden af siden</p></div>
<body>